.container
  position: relative
  float: left
  width: 100vw
  height: 100vh
  overflow: hidden

  .video-element
    width: 100%
    left: 0
    right: 0
    height: 100%
    z-index: 1


  .btn-container
    position: absolute
    height: $btn-container-height
    padding-left: 30vh
    padding-right: 30vh
    display: flex
    flex-direction: row
    flex-wrap: nowrap
    justify-content: space-between
    bottom: 0
    left: 0
    right: 0
    z-index: 9
    background: linear-gradient(to bottom, transparent, map_get($white, 'darken-5'))

    &
      height: $btn-container-height
      padding-bottom: $base-rem*2.5
    div.intro-btn
      position: relative
      float: left
      margin: $btn-container-height * .06
      margin-bottom: 0
      margin-top: $btn-container-height * .1
      inline-size: 25%

      $line-size: $btn-container-height * .4

      #text
        text-align: center
        margin-top: inherit
        margin-bottom: inherit
        width: 100%
        line-height: $line-size
        font-weight: normal
        font-size: $btn-container-height * .22
        color: map-get($white, 'base')
        transition: .3s all ease



      &:hover
        cursor: pointer
        svg #shape
          stroke-width: $btn-container-height * .1
          stroke-dashoffset: 0
          stroke-dasharray: 100, 0
          stroke: $yellow


        #text
          font-size: $btn-container-height * .25
          font-weight: bold


      &:active
        #shape
          stroke-width: .4*$base-rem

        #text
          font-size: $btn-container-height * .3



      svg
        margin-top: inherit
        margin-bottom: inherit
        position: absolute
        height: $line-size
        width: 100%
        overflow: visible

        #shape
          width: 100%
          height: 100%
          stroke-width: $btn-container-height * .2
          fill: transparent
          stroke: $yellow
          stroke-dashoffset: -208%
          stroke-dasharray: 71%, 280%
          transition: 1s all ease


#modal-container
  position: fixed
  display: table
  height: 100%
  width: 100%
  top: 0
  bottom: 0
  right: 0
  left: 0
  //margin: auto
  background: url("../Dark-Grey-Texture-Wallpaper-5.jpg")
  background-size: cover
  opacity: .90
  z-index: 10
  animation: show .4s ease-in

  .modal-background
    display: table-cell
    text-align: center
    vertical-align: middle



    .modal
      position: relative
      background: transparent
      padding-top: 1%
      padding-bottom: 1%
      padding-left: 5%
      padding-right: 5%
      margin: auto
      diplay: inline-block
      font-weight: 300
      //max-height: 60%
      +fit-screen(100vw)
        width: 45vw

      //overflow-y: scroll
      border: 1px solid $yellow
      border-bottom-left-radius: 10px
      border-top-right-radius: 10px
      //border-radius: 10px
      text-align: left
      color: #fff


      .border1
        top: -2.4%
        left: -1.8%
        position: absolute

      .border2
        left: auto
        top: auto
        bottom: -2.4%
        right: -1.8%
        rotation-point: 50% 50%
        transform: rotate(180deg)



      h2
        text-align: center
        font-size: 0.426rem
        line-height: 0.71rem
        margin-bottom: 15px
        font-weight: bold

      ul
        list-style: none

        li
          font-size: 0.1775rem
          line-height: 0.355rem
          font-weight: 600
          //text-align: center

          ul
            list-style: none

            li
              margin-left: 0
              text-align: left
              font-weight: 200
              font-size: 0.1775rem
              line-height: 0.355rem


      p
        font-size: 0.1775rem
        line-height: 0.355rem

      .modal-svg
        position: absolute
        top: 5%
        left: 10%
        height: 10%
        width: 80%
        border-radius: 3px

        rect
          stroke: #000
          stroke-width: $base-rem
          stroke-dasharray: 50%, 50%
          stroke-dashoffset: 50%

